import { Button, Form, Input, Select, Space } from "antd";
import { type Role } from "../../../../types/system/role";
interface IProps {
  onChange: (form: Role.Query) => void;
}
export default function QueryForm({ onChange }: IProps) {
  const [form] = Form.useForm();
  return (
    <Form
      form={form}
      layout="inline"
      name="tagQuery"
      onFinish={(form) => {
        onChange(form);
      }}
      autoComplete="off"
    >
      <Form.Item<Role.Query> label="角色名" name="roleName">
        <Input allowClear size="middle" />
      </Form.Item>
      <Form.Item<Role.Query> label="备注" name="remark">
        <Input allowClear size="middle" />
      </Form.Item>

      <Form.Item<Role.Query> label="状态" name="status">
        <Select
          placeholder="请选择类别"
          style={{ width: 180 }}
          allowClear
          size="middle"
        >
          <Select.Option value="0">正常</Select.Option>
          <Select.Option value="1">停用</Select.Option>
        </Select>
      </Form.Item>
      <Form.Item>
        <Space>
          <Button type="primary" htmlType="submit" size="middle">
            查询
          </Button>
          <Button
            htmlType="button"
            size="middle"
            onClick={() => {
              form.resetFields();
              form.submit();
            }}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
}
